@charset "utf-8";
.anim-tips{
  animation: frame-tips 4s forwards;
}
@keyframes frame-tips{
  0%{transform:translate3d(0,0,0);opacity: 0;}
	10%{transform:translate3d(0,-1em,0);}
	15%{transform:translate3d(0,-0.8em,0);opacity: 1;}
	100%{transform:translate3d(0,-0.8em,0);}
}
/*弹出式*/
.anim-scale-show{
  animation-name: scaleShow;
  animation-delay: 0;
  animation-duration: .2s;
  animation-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55);
  animation-iteration-count: 1;
  animation-fill-mode: both;
}
@keyframes scaleShow{
  0%{
    transform: scale(.5);
    opacity: 0;
  }
  100%{
    transform: scale(1);
    opacity: 1;
  }
}
.anim-scale-out{
  animation-name: scaleOut;
  animation-delay: 0;
  animation-duration: .2s;
  animation-timing-function: linear;
  animation-iteration-count: 1;
  animation-fill-mode: both;
}
@keyframes scaleOut{
  0%{
    transform: scale(1);
    opacity: 1;
  }
  100%{
    transform: scale(.8);
    opacity: 0.4;
  }
}
/*往左飞出*/
.anim-swiper-leftOut{
  animation-name: swiperLeftOut;
  animation-delay: 0;
  animation-duration: .4s;
  animation-timing-function: linear;
  animation-iteration-count: 1;
  animation-fill-mode: both;
}
@keyframes swiperLeftOut{
  0%{
    transform: translateX(0);
    opacity: 1;
  }
  100%{
    transform: translateX(-100%);
    opacity: 0;
  }
}
/*往左飞入*/
.anim-swiper-leftIn{
  animation-name: swiperLeftIn;
  animation-delay: 0;
  animation-duration: .4s;
  animation-timing-function: linear;
  animation-iteration-count: 1;
  animation-fill-mode: both;
}
@keyframes swiperLeftIn{
  0%{
    transform: translateX(100%);
    opacity: 0;
  }
  100%{
    transform: translateX(0);
    opacity: 1;
  }
}
/*往上飞入*/
.anim-swiper-UpIn{
  animation-name: swiperUpIn;
  animation-delay: 0;
  animation-duration: .2s;
  animation-timing-function: linear;
  animation-iteration-count: 1;
  animation-fill-mode: both;
}
@keyframes swiperUpIn{
  0%{
    transform: translateY(100%);
    opacity: 0;
  }
  100%{
    transform: translateY(0);
    opacity: 1;
  }
}
/*load*/
@keyframes anim-load1{
  0%{
    transform: rotate(0deg);
  }
  50%{
    transform: rotate(0deg);
  }
  100%{
    transform: rotate(360deg);
  }
}
@keyframes anim-load2{
  0%{
    transform: rotate(30deg);
  }
  50%{
    transform: rotate(180deg);
  }
  100%{
    transform: rotate(360deg);
  }
}
/* 消失,透明度减至0,假删除 */
.anim-hide{
  animation-name: animHide;
  animation-delay: 0;
  animation-duration: .4s;
  animation-timing-function: linear;
  animation-iteration-count: 1;
  animation-fill-mode: both;
}
@keyframes animHide{
  100%{
    opacity: 0;
  }
}

/*文档流的 svg loading*/
.anim-circle {
  transition: all 1s linear;
  animation: animCircle 2s linear infinite;
  transform-origin: center center;
}
@keyframes animCircle{
  0%{
    stroke-dasharray: 0 0 5 100;
  }
  25%{
    stroke-dasharray: 0 0 70 100;
  }
  50%{
    stroke-dasharray: 0 65 75 100;
  }
  75%{
    stroke-dasharray: 0 65 75 100;
  }
  100%{
    stroke-dasharray: 0 65 75 100;
  }
}
/*自转*/
.anim-rotate {
  animation: animRotate 2s linear infinite;
  transform-origin: center center;
}
@keyframes animRotate{
  0%{
    transform: rotate(0);
  }
  100%{
    transform: rotate(360deg);
  }
}
/* logo 向上淡入 */
.anim-fadeIn {
  animation: animFadeIn 1s linear 1 forwards;
}
@keyframes animFadeIn {
  from{
    opacity: 0;
    transform: translateY(0);
  }
  to{
    opacity: 1;
    transform: translateY(-20px);
  }
}